<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <div style="background-color: #fff; border-radius: 2px;height: 181px">
          <div id="main" style="height: 181px"></div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <div v-if="showChart" style="background-color: #fff; border-radius: 2px">
          <dv-conical-column-chart :config="config" style="height: 181px; width: 450px" />
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="登记总数" :total="total.toString()">
          <a-tooltip title="说明：客户端登记的车辆" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>

          <template slot="footer">日均量<span> {{ average }} </span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="3" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="重污染配置" style="height: 181px">
          <a-tooltip title="说明：重污染天气配置实时状态" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div v-if="pollutionStatus === '1'" class="circle green">
            已开启
          </div>
          <div v-else-if="pollutionStatus === '0'" class="circle red">
            已关闭
          </div>
        </chart-card>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="车辆台账产生量" :total="total1.toString()">
          <a-tooltip title="说明：客户端登记的车辆" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>

        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="车辆台账上传量" :total="total2.toString()">
          <a-tooltip title="说明：客户端登记的车辆" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>

        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="车辆台账上传率" :total="total3.toString()">
          <a-tooltip title="说明：客户端登记的车辆" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>

        </chart-card>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="24">
        <a-card :bordered="false" title="来车量统计" :style="{ marginTop: '24px' }">
          <div id="countC" style="height: 300px"></div>
        </a-card>
      </a-col>
    </a-row>
    <!-- <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周访问量统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="6">
              <head-info title="今日IP" :content="loginfo.todayIp"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="environment" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="team" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="rise" style="font-size: 24px" />
              </a-spin>
            </a-col>
          </a-row>
          <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row> -->
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100,
  })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200,
  })
}
export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
  },
  data() {
    return {
      pollutionStatus: "0",
      config: {
        data: [],
        textColor: '#000',
        showValue: true,
        columnColor: '#6da1ea',
      },

      loading: true,
      center: null,
      rankList,
      barData,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      showChart: false,
      total: '',
      total1: '',
      total2: '',
      total3: '',
      average: '',
      count1: [],
      date1: [],
      showChart1: false,
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 100)
    this.initLogInfo()
  },
  mounted() {
    this.getCountData()
    setTimeout(() => {
      this.getCountChart()
    }, 100)
  },
  methods: {
    getCountData() {
      getAction('/carinfo/carRecord/queryCount', {}).then((res) => {
        if (res.success) {
          this.config.data = res.result.data
          this.total1 = res.result.total1
          this.total2 = res.result.total2
          this.total3 = res.result.total3
          this.getCharts()
          this.showChart = true
        }
      })
      getAction('/carinfo/carRegister/queryByCount', {}).then((res) => {
        if (res.success) {
          this.config.data = res.result.data
          this.average = res.result.average
          this.total = res.result.total
          this.getCharts()
          this.showChart = true
        }
      })
      getAction('/carinfo/carRecord/getCount', {}).then((res) => {
        if (res.success) {
          this.count1 = res.result.count
          this.date1 = res.result.date
          console.log(this.count1, this.date1, 22222222)
          this.getCountChart()
          //this.showChart1 = true
        }
      })
      // 重污染天气实时配置状态
      getAction('/pollutionStatus/pollutionStatus/getPollutionStatus').then((res) => {
        if (res.success) {
          this.pollutionStatus = res.result.status;
          this.getCountChart()
        }else{
          console.log(res.message);
        }
      })

    },

    // 使用柱形图，关于其他配置可以去官网查看
    getCharts() {
      const chartBox = this.$echarts.init(document.getElementById('main'))
      const option = {
        title: { subtext: '总数:' + this.total, },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: '来车量',
            type: 'pie',
            center: ['50%', '50%'],
            //roseType: 'area',
            itemStyle: {
              borderRadius: 8,
            },
            data: this.config.data,
            label: {
              show: true,

              formatter: '{b}:{c}' + '\r' + '({d}%)',
            },
          },
        ],
      }
      chartBox.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function () {
        chartBox.resize()
      })
    },

    getCountChart() {
      const chartBox2 = this.$echarts.init(document.getElementById('countC'))
      const option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          },
        },
        title: {
          left: 'center',
          text: '日来车辆统计',
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.date1,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        series: [
          {
            name: '数量',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)',
            },

            data: this.count1,
          },
        ],
      }
      chartBox2.setOption(option)
    },

    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach((key) => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
      getVisitInfo().then((res) => {
        if (res.success) {
          this.visitInfo = res.result
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.circle {
  animation: pulse 1s infinite alternate; /* 添加闪烁动画效果 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    top: 30px; /* 向下移动 20px，可以根据需要调整 */
  }

.circle.green {
  background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.75) 80%, rgba(255,255,255,1) 100%), /* 添加径向渐变背景 */
              linear-gradient(45deg, #00FF00, #00FF7F); /* 使用绿色线性渐变背景 */
}

.circle.red {
  background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.75) 80%, rgba(255,255,255,1) 100%), /* 添加径向渐变背景 */
              linear-gradient(45deg, #ff7300, #e20000); /* 添加线性渐变背景 */
}

.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>